<template>
  <div class="bg-gray-200" v-if="detail">
    <div class="text-center pt-20 bg-white overflow-hidden">
      <img :src="detail.brandLogo" class="h-32 w-32 rounded-1" alt="" />
      <h2 class="text-5xl p-10">{{ detail.jobName }}</h2>
      <h3>{{ detail.brandName }}</h3>
    </div>
    <div class="flex justify-around bg-white">
      <span>{{ detail.salaryDesc }}</span>
      <span>{{ detail.cityName }}·{{ detail.areaDistrict }}</span>
    </div>
    <div class="p-12 bg-white">
      <h3 class="py-12 text-5xl">岗位要求</h3>
      <van-tag color="#FD7753" class="m-4" v-for="item in detail.jobLabels">{{
        item
      }}</van-tag>
    </div>
    <div class="p-12 bg-white mt-5">
      <h3 class="py-12 text-5xl">福利待遇</h3>
      <van-tag color="#FD7753" class="m-4" v-for="item in detail.welfareList">{{
        item
      }}</van-tag>
    </div>
  </div>
  <div class="p-12 bg-white">
    <h3 class="py-12 text-5xl">推荐岗位</h3>
  </div>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="flex p-8 flex-wrap justify-between">
      <job-item
        v-for="item in jobList"
        :key="item.objectId"
        :job-data="item"
        hot
      />
    </div>
  </van-list>

  <div class="fixed left-0 bottom-0 w-full bg-white flex p-8 box-border">
    <div class="w-30 h-30 flex justify-center items-center collect">
      <i class="iconfont icon-bookmark-o"></i>
    </div>
    <div class="flex-1 px-4">
      <van-button v-if="state == 1" color="#FD7753" block @click="handleJoin"
        >立即申请</van-button
      >
      <van-button v-if="state == 2" color="#999" block>等待审核</van-button>
      <van-button v-if="state == 3" color="#5566D3" block>预约面试</van-button>
      <van-button v-if="state == 4" color="#229933" block>成功入职</van-button>
      <van-button v-if="state == 5" color="#F16688" block>不太适合</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { jobDetailGet } from "../api/pro";
import { joinPost, joinGet } from "../api/user";
import { ref } from "vue";
import { JobType } from "../types/pro";
import { useJobList } from "../hooks/pro";
import { useUser } from "../store/user";
const route = useRoute();
// console.log(route.params);
let id = route.params.id as string;
let detail = ref<JobType | null>(null);
let res = await jobDetailGet(id);
console.log(res);
detail.value = res.data;

// 自定义Hook复用列表分页逻辑
let { loading, finished, jobList, onLoad } = useJobList();

//详情页跳详情页
onBeforeRouteUpdate(async (to, _) => {
  // console.log(to);
  let id = to.params.id as string;
  let res = await jobDetailGet(id);
  detail.value = res.data;
});

//报名
const user = useUser();
const router = useRouter();
const handleJoin = () => {
  if (!user.userInfo) {
    router.push("/login");
    return;
  }
  let { name, resume } = user.userInfo;
  if (!name || !resume) {
    router.push("/edit");
    return;
  }
  let userId = user.userInfo.objectId as string;
  let jobId = route.params.id as string;
  let { brandName, brandLogo, jobName } = detail.value as JobType;
  joinPost({ userId, jobId, brandName, brandLogo, jobName, state: 2 }).then(
    () => {
      state.value = 2;
    }
  );
};

//当前岗位报名状态控制
const state = ref<number>(1);
let userId = user.userInfo?.objectId;
let jobId = route.params.id as string;
let join = await joinGet(userId, jobId);
let { results } = join.data;
if (results.length) {
  state.value = results[0].state; //用后端下发的状态控制本地按钮状态
}
</script>

<style lang="scss" scoped>
.collect {
  border: 1px solid rgba(238, 238, 238, 1);
}
</style>
